<template>
  <transition name="fade">
    <div v-show="dialogVisible">
      <t-dialog :visible="dialogVisible" size="tiny">
        <div slot="content" class="app-toolbox-xmap-loading-dialog__content">
          <div class="app-toolbox-xmap-loading-dialog__content__icon-wrapper">
            <img :src="tomatoPic" style="height: 100%; width: 100%;"></img>
          </div>
          <div class="app-toolbox-xmap-loading-dialog__content__description">模块载入中...</div>
        </div>
      </t-dialog>
    </div>
  </transition>
</template>

<script>
  import TDialog from '@/components/dialog';
  import tomato from '@/assets/rate/tomato.svg';

  export default {
    name: 'app-toolbox-xmap-navbar-loading-dialog',
    props: {
      visible: {
        type: Boolean,
        required: true,
      },
    },
    components: {
      TDialog,
    },
    computed: {
      dialogVisible() {
        return this.visible;
      },
      tomatoPic() {
        return tomato;
      },
    },
  };
</script>
<style scoped="scoped">
  .fade-enter-active, .fade-leave-active {
    transition: opacity 1s;
  }
  .fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
    opacity: 0;
  }
</style>